<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">


    <!-- Metas -->
    <title>curtains.js | Documentation | Vec2 class</title>
    <meta name="description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
    <link rel="canonical" href="https://www.curtainsjs.com/vec-2-class.html">

    <!-- Facebook OG -->
    <meta property="og:title" content="curtains.js | Documentation | Vec2 class">
    <meta property="og:type" content="website">
    <meta property="og:description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
    <meta property="og:url" content="https://www.curtainsjs.com/vec-2-class.html">
    <meta property="og:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

    <!-- Twitter card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@martinlaxenaire">
    <meta name="twitter:creator" content="@martinlaxenaire">
    <meta name="twitter:title" content="curtains.js | Documentation | Vec2 class">
    <meta name="twitter:description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
    <meta name="twitter:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png">
    <link rel="manifest" href="images/favicons/site.webmanifest">
    <link rel="mask-icon" href="images/favicons/safari-pinned-tab.svg" color="#202340">
    <link rel="shortcut icon" href="images/favicons/favicon.ico">
    <meta name="msapplication-TileColor" content="#202340">
    <meta name="msapplication-config" content="images/favicons/browserconfig.xml">
    <meta name="theme-color" content="#202340">

    <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="page-wrap">

    <div id="canvas"></div>

    <div id="content">

        <header id="header">
            <div class="wrapper">
                <div id="header-wrapper" class="flex-wrapper">
                    <div id="header-title">
                        <a href="/" title="Home">curtains.js</a>
                    </div>
                    <nav id="main-menu">
                        <ul class="flex-wrapper">
                            <li>
                                <a href="get-started.html">Get started</a>
                            </li>
                            <li>
                                <a href="documentation.html" class="active">Docs</a>
                            </li>
                            <li>
                                <a href="download.html">Download</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>

        <section class="content-section api-section">

            <nav id="api-menu-nav">
                <ul id="api-menu">
                    <li>
                        <div class="api-top-menu-item">Core</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="curtains-class.html">Curtains</a>
                            </li>
                            <li>
                                <a href="plane-class.html">Plane</a>
                            </li>
                            <li>
                                <a href="texture-class.html">Texture</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Frame Buffer Objects</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="render-target-class.html">RenderTarget</a>
                            </li>
                            <li>
                                <a href="shader-pass-class.html">ShaderPass</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Loaders</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="texture-loader-class.html">TextureLoader</a>
                            </li>
                        </ul>
                    </li>
                    <li class="active">
                        <div class="api-top-menu-item">Math</div>
                        <ul class="api-submenu-content">
                            <li class="active">
                                <a href="vec-2-class.html">Vec2</a>

                                <div class="api-submenu-content">
                                    <div class="api-submenu-title">
                                        <a href="vec-2-class.html#basic-usage">Basic usage</a>
                                    </div>
                                    <div class="api-submenu-title">
                                        <a href="vec-2-class.html#parameters">Parameters</a>
                                    </div>
                                    <div class="api-submenu-title">
                                        <a href="vec-2-class.html#properties">Properties</a>
                                    </div>
                                    <ul class="api-submenu">
                                        <li>
                                            <a href="vec-2-class.html#x-value">x</a>
                                        </li>
                                        <li>
                                            <a href="vec-2-class.html#y-value">y</a>
                                        </li>
                                    </ul>
                                    <div class="api-submenu-title">
                                        <a href="vec-2-class.html#methods">Methods</a>
                                    </div>
                                    <ul class="api-submenu">
                                        <li>
                                            <a href="vec-2-class.html#add">add</a>
                                        </li>
                                        <li>
                                            <a href="vec-2-class.html#add-scalar">addScalar</a>
                                        </li>
                                        <li>
                                            <a href="vec-2-class.html#clone">clone</a>
                                        </li>
                                        <li>
                                            <a href="vec-2-class.html#copy">copy</a>
                                        </li>
                                        <li>
                                            <a href="vec-2-class.html#dot">dot</a>
                                        </li>
                                        <li>
                                            <a href="vec-2-class.html#equals">equals</a>
                                        </li>
                                        <li>
                                            <a href="vec-2-class.html#max">max</a>
                                        </li>
                                        <li>
                                            <a href="vec-2-class.html#min">min</a>
                                        </li>
                                        <li>
                                            <a href="vec-2-class.html#multiply">multiply</a>
                                        </li>
                                        <li>
                                            <a href="vec-2-class.html#multiply-scalar">multiplyScalar</a>
                                        </li>
                                        <li>
                                            <a href="vec-2-class.html#normalize">normalize</a>
                                        </li>
                                        <li>
                                            <a href="vec-2-class.html#sanitize-nan-values-with">sanitizeNaNValuesWith</a>
                                        </li>
                                        <li>
                                            <a href="vec-2-class.html#set">set</a>
                                        </li>
                                        <li>
                                            <a href="vec-2-class.html#sub">sub</a>
                                        </li>
                                        <li>
                                            <a href="vec-2-class.html#sub-scalar">subScalar</a>
                                        </li>
                                    </ul>
                                    <div class="api-submenu-title">
                                        <a href="vec-2-class.html#events">Events</a>
                                    </div>
                                    <ul class="api-submenu">
                                        <li>
                                            <a href="vec-2-class.html#on-change">onChange</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <a href="vec-3-class.html">Vec3</a>
                            </li>
                            <li>
                                <a href="mat-4-class.html">Mat4</a>
                            </li>
                            <li>
                                <a href="quat-class.html">Quat</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Extras</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="ping-pong-plane-class.html">PingPongPlane</a>
                            </li>
                            <li>
                                <a href="fxaa-pass-class.html">FXAAPass</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>

            <div id="api-content">

                <div class="api-content-inner">
                    <div class="inner-section">
                        <h1>Vec2 class</h1>

                        <div class="api-item-examples">
                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/math/Vec2.js" title="Vec2 class source code" target="_blank">Source code</a>
                        </div>

                        <h2 id="basic-usage">Basic usage</h2>
                        <p>
                            Vec2 is the class used for all 2 dimensions vector manipulations.
                        </p>
                        <h3>Creation</h3>
                        <p>
                            To create a new Vec2, just use its constructor.<br />
                            If used without parameters, it will create a null vector Vec2 with X and Y components equal to 0.
                        </p>

                        <div class="code">

                            <div class="code-comment">
                                // create two new Vec2 vectors
                            </div>
                            <div class="code-block">
                                <span class="code-var">const</span> nullVector = <span class="code-var">new</span> <span class="code-tag">Vec2</span>()<span class="code-var">;</span>
                            </div>

                            <div>
                                <span class="code-var">const</span> vector = <span class="code-var">new</span> <span class="code-tag">Vec2</span>(<span class="code-number">1</span><span class="code-var">,</span> <span class="code-number">1</span>)<span class="code-var">;</span>
                            </div>

                        </div>

                        <h3>Use chaining</h3>
                        <p>
                            Since most of the Vec2 methods return the vector itself, you can use chaining:
                        </p>

                        <div class="code">

                            <div class="code-comment">
                                // create a new Vec2 vector and chain methods
                            </div>

                            <div>
                                <span class="code-var">const</span> vector = <span class="code-var">new</span> <span class="code-tag">Vec2</span>().<span class="code-tag">addScalar</span>(<span class="code-number">2</span>).<span class="code-tag">normalize</span>()<span class="code-var">;</span>
                            </div>

                        </div>

                        <h3>onChange callback</h3>
                        <p>
                            Vec2 class is using getters and setters, allowing to execute a function each time one of the vector components changes:
                        </p>

                        <div class="code">

                            <div class="code-comment">
                                // create a new Vec2 vector and listen to its changes
                            </div>

                            <div>
                                <span class="code-var">const</span> vector = <span class="code-var">new</span> <span class="code-tag">Vec2</span>().<span class="code-tag">onChange</span>(() => {
                            </div>

                            <div class="code-indent">
                                <div class="code-comment">
                                    // one of the vector component just changed, do something...
                                </div>
                                <div>
                                    <span class="code-var">const</span> normalizedVector = vector.<span class="code-tag">normalize</span>()<span class="code-var">;</span>
                                </div>
                            </div>
                            <div class="code-block">
                                })<span class="code-var">;</span>
                            </div>

                            <div class="code-comment">
                                // this will trigger our onChange callback
                            </div>
                            <div class="code-block">
                                vector.<span class="code-property">x</span> = <span class="code-number">1</span><span class="code-var">;</span>
                            </div>
                            <div class="code-comment">
                                // be careful, this will trigger onChange again!
                            </div>
                            <div>
                                vector.<span class="code-property">y</span> = <span class="code-number">2</span><span class="code-var">;</span>
                            </div>

                        </div>

                        <h2 id="parameters">Parameters</h2>

                        <ul class="api-item-parameters">
                            <li>
                                <span class="api-item-parameter-label">
                                    X
                                </span>
                                <span class="api-item-parameter-type">
                                    float, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    value along X axis. Default to 0.
                                </span>
                            </li>
                            <li>
                                <span class="api-item-parameter-label">
                                    Y
                                </span>
                                <span class="api-item-parameter-type">
                                    float, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    value along Y axis. Default to 0.
                                </span>
                            </li>
                        </ul>

                        <h2 id="properties">Properties</h2>
                        <ul>
                            <li id="x-value">
                                <p>
                                    <strong>x</strong> (float): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Value along X axis.
                                </p>
                            </li>
                            <li id="y-value">
                                <p>
                                    <strong>y</strong> (float): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Value along Y axis.
                                </p>
                            </li>
                        </ul>

                        <h2 id="methods">Methods</h2>
                        <ul>
                            <li id="add">
                                <p>
                                    <strong>add</strong>(vector): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Adds a vector to this vector.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            vector
                                        </span>
                                        <span class="api-item-parameter-type">
                                            Vec2 class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            vector to add
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> this vector after addition.
                                </p>
                            </li>

                            <li id="add-scalar">
                                <p>
                                    <strong>addScalar</strong>(scalar): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Adds a scalar to this vector.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            scalar
                                        </span>
                                        <span class="api-item-parameter-type">
                                            float
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            number to add
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> this vector after addition.
                                </p>
                            </li>

                            <li id="clone">
                                <p>
                                    <strong>clone</strong>(): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Clone this vector.
                                </p>
                                <p>
                                    <strong>returns:</strong> new cloned vector.
                                </p>
                            </li>

                            <li id="copy">
                                <p>
                                    <strong>copy</strong>(vector): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Copy a vector into this vector.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            vector
                                        </span>
                                        <span class="api-item-parameter-type">
                                            Vec2 class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            vector to copy
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> this vector after copy.
                                </p>
                            </li>

                            <li id="dot">
                                <p>
                                    <strong>dot</strong>(vector): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Calculates the dot product of 2 vectors.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            vector
                                        </span>
                                        <span class="api-item-parameter-type">
                                            Vec2 class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            vector to use for dot product
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> a float representing the dot product of the 2 vectors.
                                </p>
                            </li>

                            <li id="equals">
                                <p>
                                    <strong>equals</strong>(vector): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Checks if 2 vectors are equal.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            vector
                                        </span>
                                        <span class="api-item-parameter-type">
                                            Vec2 class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            vector to compare
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> true if the 2 vectors are equals, false otherwise.
                                </p>
                            </li>

                            <li id="max">
                                <p>
                                    <strong>max</strong>(vector): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Apply max values to this vector.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            vector
                                        </span>
                                        <span class="api-item-parameter-type">
                                            Vec2 class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            vector representing max values
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> vector with max values applied.
                                </p>
                            </li>

                            <li id="min">
                                <p>
                                    <strong>min</strong>(vector): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Apply min values to this vector.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            vector
                                        </span>
                                        <span class="api-item-parameter-type">
                                            Vec2 class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            vector representing min values
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> vector with min values applied.
                                </p>
                            </li>

                            <li id="multiply">
                                <p>
                                    <strong>multiply</strong>(vector): <span class="api-item-version">v7.1</span>
                                </p>
                                <p>
                                    Multiplies a vector with this vector.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            vector
                                        </span>
                                        <span class="api-item-parameter-type">
                                            Vec2 class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            vector to use for multiplication
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> this vector after multiplication.
                                </p>
                            </li>

                            <li id="multiply-scalar">
                                <p>
                                    <strong>multiplyScalar</strong>(scalar): <span class="api-item-version">v7.1</span>
                                </p>
                                <p>
                                    Multiplies a scalar with this vector.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            scalar
                                        </span>
                                        <span class="api-item-parameter-type">
                                            float
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            number to use for multiplication
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> this vector after multiplication.
                                </p>
                            </li>

                            <li id="normalize">
                                <p>
                                    <strong>normalize</strong>(): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Normalize this vector.
                                </p>
                                <p>
                                    <strong>returns:</strong> normalized vector.
                                </p>
                            </li>

                            <li id="sanitize-nan-values-with">
                                <p>
                                    <strong>sanitizeNaNValuesWith</strong>(vector): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Merges this vector with a vector when values are NaN. Mostly used internally to avoid errors.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            vector
                                        </span>
                                        <span class="api-item-parameter-type">
                                            Vec2 class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            vector to use for sanitization (i.e. set this vector value if original vector value is NaN).
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> sanitized vector.
                                </p>
                            </li>

                            <li id="set">
                                <p>
                                    <strong>set</strong>(x, y): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Sets the vector from values.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            x
                                        </span>
                                        <span class="api-item-parameter-type">
                                            float
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            X component of our vector.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            y
                                        </span>
                                        <span class="api-item-parameter-type">
                                            float
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Y component of our vector.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> this vector after being set.
                                </p>
                            </li>

                            <li id="sub">
                                <p>
                                    <strong>sub</strong>(vector): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Subtracts a vector from this vector.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            vector
                                        </span>
                                        <span class="api-item-parameter-type">
                                            Vec2 class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            vector to use for subtraction.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> this vector after subtraction.
                                </p>
                            </li>

                            <li id="sub-scalar">
                                <p>
                                    <strong>subScalar</strong>(scalar): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Subtracts a scalar to this vector.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            scalar
                                        </span>
                                        <span class="api-item-parameter-type">
                                           float
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            number to use for subtraction.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> this vector after subtraction.
                                </p>
                            </li>
                        </ul>

                        <h2 id="events">Events</h2>
                        <ul>
                            <li id="on-change">
                                <p>
                                    <strong>onChange</strong>(callback): <span class="api-item-version">v8.0</span>
                                </p>
                                <p>
                                    Execute a function each time the x or y component of the vector changed.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your Vec2 object, allowing it to be chainable.
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

        </section>
    </div>
</div>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-141413267-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-141413267-1');
</script>

</body>
</html>